<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      .tab {
        display: inline-block;
        padding: 10px;
        background-color: #eee;
        cursor: pointer;
      }
      .iframe {
        display: none;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <!-- <ul>
          <li><a href="#">Tab 1</a><button class="delete-tab-button">Delete</button></li>
          <li><a href="#">Tab 2</a><button class="delete-tab-button">Delete</button></li>
          <li><a href="#">Tab 3</a><button class="delete-tab-button">Delete</button></li>
          <li><button id="add-tab-button">Add Tab</button></li>
        </ul> -->
        
       <div class="tabs">
         <div class="tab active" data-tab="1">Tab 1</div>
         <div class="tab" data-tab="2">Tab 2</div>
         <div class="tab" data-tab="3">Tab 3</div>
       </div>
      </nav>
      <form>
        <input id="url-input" type="text" placeholder="Enter URL">
        <button id="go-button" type="submit">Go</button>
      </form>
      <button id="refresh-button">Refresh</button>
    </header>
    <main>
      <div class="iframes">
        <iframe class="iframe" data-tab="1" src=""></iframe>
        <iframe class="iframe" data-tab="2" src=""></iframe>
        <iframe class="iframe" data-tab="3" src=""></iframe>
      </div>
    </main>
    <script>
      let currentIframe = document.querySelector('.iframe[data-tab="1"]');
      const urlInput = document.getElementById('url-input');
      const goButton = document.getElementById('go-button');
      const refreshButton = document.getElementById('refresh-button');
      const addTabButton = document.getElementById('add-tab-button');
      const deleteTabButtons = document.querySelectorAll('.delete-tab-button'); // Get all the delete tab buttons

      goButton.addEventListener('click', (event) => {
        event.preventDefault();
        currentIframe.src = document.querySelector('#url-input').value;
      });

      refreshButton.addEventListener('click', () => {
        currentIframe.src = currentIframe.src;
      });

      // addTabButton.addEventListener('click', () => {
      //   const newTab = document.createElement('li');
      //   const newTabLink = document.createElement('a');
      //   newTabLink.href = '#';
      //   newTabLink.textContent = `Tab ${document.querySelectorAll('nav ul li').length}`;
      //   newTab.appendChild(newTabLink);
      //   const newDeleteTabButton = document.createElement('button'); // Create a new delete tab button element
      //   newDeleteTabButton.classList.add('delete-tab-button'); // Add the delete tab button class to the new element
      //   newDeleteTabButton.textContent = 'Delete'; // Set the text content of the new element
      //   newTab.appendChild(newDeleteTabButton); // Append the new element to the new list item element
      //   document.querySelector('nav ul').insertBefore(newTab, addTabButton.parentNode);
      //   addDeleteTabButtonEventListeners(); // Add event listeners to the new delete tab button
      // });

      // function addDeleteTabButtonEventListeners() {
      //   const deleteTabButtons = document.querySelectorAll('.delete-tab-button');
      //   deleteTabButtons.forEach((deleteTabButton) => {
      //     deleteTabButton.addEventListener('click', () => {
      //       const listItem = deleteTabButton.parentNode; // Get the parent list item element
      //       listItem.parentNode.removeChild(listItem); // Remove the list item element
      //     });
      //   });
      // }

      // addDeleteTabButtonEventListeners(); // Add event listeners to the existing delete tab buttons
    
      const tabs = document.querySelectorAll('.tab');
      const iframes = document.querySelectorAll('.iframe');
    
      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          iframes.forEach(iframe => {
            iframe.style.display = 'none';
          });
          const tabNum = tab.getAttribute('data-tab');
          const iframeToShow = document.querySelector(`.iframe[data-tab="${tabNum}"]`);
          iframeToShow.style.display = 'block';
          currentIframe = iframeToShow;
          tabs.forEach(tab => {
            tab.classList.remove('active');
          });
          tab.classList.add('active');
        });
      });
    </script>
  </body>
</html>